<template>
   <div>
     <div class="ts-right">
       <div class="right-menu-item">
         <div
           class="tsk digital-color"></div>
       </div>
       <div class="right-menu-item">
         <div>数字量</div>
       </div>
       <div class="right-menu-item">
         <div class="tsk analog-color"></div>
       </div>
       <div class="right-menu-item">
         <div>模拟量</div>
       </div>
       <div class="right-menu-item" style="float:right;">
         <span class="pan-btn blue-btn " style="background:#5414d3;color:#fff;    padding: 0px 35px;" @click="goback">提交</span>
       </div>
       <div class="right-menu-item" style="float:right;">
         <span style="float:right;margin-right:50px;color: #555555;">默认前六个为关键信息</span>
       </div>
     </div>
    <!-- <div style="width:100%;margin-left: 10px;padding: 0 10px 0 10px;">


     </div>-->
     <div style="width:100%;" v-for="plcDataA in pointArr">
       <div style="clear: both; padding: 20px 10px 0 10px;">类型名称：{{plcDataA.className}}</div>
       <draggable v-model="plcDataA.data"  @update="datadragEnd" :options = "{animation:500}" style="     padding: 0 10px;   clear: both;margin-bottom:20px">
             <el-col :xs="24" :sm="24" :lg="6"  v-for="plcData of plcDataA.data" :key="plcDataA.point_id" :span="6" style="padding: 5px">

               <div v-if="plcData.point_type===1" class="plc-data-panel digital-panel">
                 <center><span class="dddd">{{plcData.point_name}}</span></center>
               </div>

               <div v-else class="plc-data-panel analog-panel">
                 <center><span class="dddd">{{plcData.point_name}}</span></center>
               </div>

             </el-col>
       </draggable>
       <div v-if="plcDataA.data.length==0" style="margin:50px 0 50px 0;font-size: 16px;letter-spacing: 1px;font-weight: normal;color:#888888">
         <center>

           <img src="../../assets/zwsj.png" width="103px" height="120px"></img>
           <p> 暂无数据</p>

         </center>
       </div>
     </div>
     <div v-if="pointArr.length==0" style="margin:50px 0 50px 0;font-size: 16px;letter-spacing: 1px;font-weight: normal;color:#888888">
       <center>
         <img src="../../assets/zwsj.png" width="103px" height="120px"></img>
         <p>暂无数据</p>

       </center>
     </div>

   </div>
</template>

<script>
  /*npm install vuedraggable -S*/
  import {mapGetters} from 'vuex';
  import draggable from 'vuedraggable'
  import {getUserInfo} from "../../utils/auth";

  /*Vue.use(VueDND)*/
  export default {
    name: "PointConfig",
    components: {
      draggable
    },
    computed: {
      ...mapGetters(['plcId'])
    },
    watch: {
      plcId(device_id) {
        let me = this;
        this.device_id=device_id;
        //获取userid
        let user_id=getUserInfo().user_id;
        //查询
        if(device_id!=null){
          this.$axios.post('pointConfigRoutes', {
            action_type: 'plcPointQuery',
            device_id: device_id,
            user_id:user_id
          }).then(function (response) {
            me.pointArr = response.data.data;
            let vm=me.$store;
            vm.commit('updateLoading',false);
            return {success: true}
          });
        }
      }
    },
    data(){
      return{
        newIndex:0,
        oldIndex:0,
        pointArr: [],
        device_id:0
      }
    },


    beforeDestroy() {
      this.$store.dispatch('plc/setPlcId', null);//调取方法
      console.log('destroy');
    },
    methods:{
      datadragEnd (evt) {
        /*evt.preventDefault();*/
        /*console.log('拖动前的索引 :' + evt.oldIndex)*/
        this.oldIndex=evt.oldIndex;
        /*console.log('拖动后的索引 :' + evt.newIndex)*/
        this.newIndex=evt.newIndex;
        console.log(this.pointArr);
      },
      goback: function (e) {
        let user_id=getUserInfo().user_id;

        if(this.newIndex!=this.oldIndex) {
          this.$axios.post('pointConfigRoutes', {
            action_type: 'plcPointOrder',
            device_id: this.device_id,
            user_id: user_id,
            pointList: this.pointArr
          }).then((res) => {
            if (res.data.success) {
              const h = this.$createElement;
              this.$message({
                message: h('p', null, [
                  h('i', {style: 'color: green'}, '通过: '),
                  h('i', {style: 'color: blue'}, `提交成功`)
                ])
              });
            }

          });
        }else{
          const h = this.$createElement;
          this.$message({
            message: h('p', null, [
              h('i', {style: 'color: green'}, 'error: '),
              h('i', {style: 'color: blue'}, `请排序后提交`)
            ])
          });
        }
      }
    },
    mounted () {
      //为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
      document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
      }
    },
  }
</script>

<style scoped>
</style>
